{extend name="main_mobile"}
{block name="style"}
<style type="text/css">
	.w-100px{width: 100px;}
	.flex-lable{width: 100px;color: #6c757d;text-align: right;padding-right: 10px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3 table-responsive p-3">
	<el-form :model="search" @submit.native.prevent="submitForm" ref="search"
	label-position="right">

	<div class="flex flex-center">
		<div>
			<el-select v-model="search.search_type" placeholder="请选择" class="w-80px">
				<el-option key="uid"label="UID"value="uid"></el-option>
				<el-option key="user"label="用户名"value="user"></el-option>
				<el-option key="mobile"label="手机号"value="mobile"></el-option>
				<el-option key="email"label="邮箱"value="email"></el-option>
			</el-select>
		</div>
		<div class="mx-1 flex-1">
			<el-input v-model="search.key" placeholder="请输入你想搜索的关键词" clearable></el-input>
		</div>
		<el-button type="primary" @click="sendHtml">查询</el-button>
		<span class="text-nowrap px-2 py-3 small text-secondary"
		@click="searchMore= !searchMore">{{searchMore?'收起':'更多'}}</span>
	</div>
	<div v-show="searchMore" style="display: none;" class="mt-3">

		<el-form-item label="状态" prop="status">
			<el-select v-model="search.status" placeholder="请选择">
				<el-option key="all"label="全部"value="all"></el-option>
				<el-option :key="1"label="正常":value="1"></el-option>
				<el-option :key="0"label="禁用":value="0"></el-option>
			</el-select>
		</el-form-item>
	</div>
</el-form>
</div>

<div class="bg-white mb-2 p-3" v-for="(v,index) in tableData">
	<div class="flex flex-center">
		<div class="flex flex-center flex-1">
			<el-image
			v-if="v.headimg" 
			style="width: 30px; height: 30px"
			lazy
			class="rounded-circle mr-2"
			:src="v.headimg" 
			:preview-src-list="[v.headimg]">
		</el-image>
		<div class="text-small" v-if="v.uid">
			<div>{{v.nickname}}</div>
			<div>{{v.uid}}</div>
		</div>
	</div>
	<div class="text-secondary text-small">ID:{{v.id}}</div>
</div>
<div class="flex pt-2">
	<div class="flex-1 flex flex-center">
		<div class="w-50px text-grey">数量</div>
		<div class="flex-1">{{v.value}}{{v.unit}}</div>
	</div>
	<div class="flex-1 flex flex-center">
		<div class="w-50px text-grey">剩余</div>
		<div class="flex-1">{{v.surplus_value}}{{v.unit}}</div>
	</div>
</div>
<div class="flex pt-2">
	<div class="flex-1 flex flex-center">
		<div class="w-50px text-grey">内容</div>
		<div class="flex-1">
			<div>{{v.rule_name}}</div>
			<div class="text-secondary small">{{v.vip_name}}</div>
		</div>
	</div>
</div>
<div class="flex pt-2">
	<div class="flex-1 flex flex-center">
		<div class="w-50px text-grey">创建</div>
		<div class="flex-1">{{ v.create_time }}</div>
	</div>
</div>
<div class="flex pt-2">
	<div class="flex-1 flex flex-center">
		<div class="w-50px text-grey">过期</div>
		<div class="flex-1">
			<div v-if="v.is_expiry==1">已过期</div>
			<div v-else-if="!v.status" class="text-primary">已使用</div>
			<div v-else>{{v.expiry_time}}</div>
		</div>
	</div>
</div>
<div class="flex flex-center pt-3">
	<div class="flex-1"></div>
	<el-popover
	placement="top"
	width="300"
	title="编辑权益"
	trigger="click">
	<el-form label-position="top">
		<el-input v-model="v.surplus_value" class="mb-2" size="mini">
			<template slot="prepend"><div class="w-80px">剩余数量</div></template>
			<template slot="append">{{v.unit}}</template>
		</el-input>
		<el-input v-model="v.value" class="mb-2" size="mini">
			<template slot="prepend"><div class="w-80px">数量</div></template>
			<template slot="append">{{v.unit}}</template>
		</el-input>
		<el-date-picker
		v-model="v.expiry_time"
		align="right"
		type="date"
		format="yyyy-M-d"
		value-format="yyyy-M-d"
		:picker-options="endPickerOptions"
		placeholder="End Time" class="mb-2" size="mini">
	</el-date-picker>
	<div class="flex">
		<div class="flex-1"></div>
		<el-button
		type="primary"
		size="mini"
		:loading="v.status==2"
		@click="editRights(v)">
		确定
	</el-button>
</div>
</el-form>
<div class="small flex pointer" slot="reference">
	<el-button plain round size="minism" @click="getUserInfo(v)" v-if="v.status">编辑</el-button>
</div>
</el-popover>
<div class="mx-1"></div>
<el-button
type="danger"
size="minism"
plain
round
v-if="v.is_expiry!==1&&v.status"
:loading="v.is_expiry==2"
@click="invalidRights(v)">
作废
</el-button>
</div>
</div>
<div class="table-responsive py-3 text-center">
	<el-pagination
	background
	@size-change="handleSizeChange"
	@current-change="handleCurrentChange"
	:current-page="search.page"
	:page-sizes="[10,50,100,200]"
	:page-size="search.pageSize"
	layout="total, sizes, prev, next"
	:total="search.total">
</el-pagination>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			searchMore:false,
			labelPosition:'right',
			search:{
				{notempty name=":request()->get('uid')"}
				search_type:'uid',
				key:'{:request()->get('uid')}',
				{elseif request()->get('user')/}
				search_type:'user',
				key:'{:request()->get('user')}',
				{elseif request()->get('mobile')/}
				search_type:'mobile',
				key:'{:request()->get('mobile')}',
				{elseif request()->get('email')/}
				search_type:'email',
				key:'{:request()->get('email')}',
				{else/}
				search_type:'uid',
				key:'',
				{/notempty}
				status:'all',
				sort:'default',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			endPickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now();
				},
			},
			tableData:[],
		},
		watch:{
			view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
		},
		methods: {
			editRights(data){
				if (data.status==2) return;
				data.status=2;
				$.ajax({
					url:'/user/vip/editRights/'+data.id,
					data:data,
					type:'post',
					dataType:'json',
					success:function(ret){
						if (ret) {
							if(ret.code == 0){
								XYBase.success(ret.msg);
								data.value=ret.data.value;
								data.surplus_value=ret.data.surplus_value;
								data.status=ret.data.status;
								data.expiry_time=ret.data.expiry_time;
								data.is_expiry=ret.data.is_expiry;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error)
						}
					},
					error:function(err){
						XYBase.error(XYBase.config.system_network_error)
					}
				});
			},
			invalidRights(data){
				if (data.is_expiry==2) return;
				data.is_expiry=2;
				$.getJSON('/user/vip/invalidRights/'+data.id,function(ret){
					data.is_expiry=0;
					if (ret) {
						if (ret.code === 0) {
							data.is_expiry=1;
						}else{
							XYBase.msg(ret.msg);
						}
					}else{
						XYBase.error(XYBase.config.system_network_error);
					}
				});
			},
			resetForm:function(formName) {
				this.$refs[formName].resetFields();
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
				this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
				this.initHtml();
			},
			sendHtml(){
				this.search.page=1;
				this.initHtml();
			},
			initHtml() {
				var _this=this;
				_this.search.ajax=true;
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
						_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
						_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		}
	});
	$(function(){
		vm.initHtml();
		reloadWindowSize();
		$(window).resize(function(){
			reloadWindowSize();
		});
	});
	function reloadWindowSize (argument) {
		var winW=$(window).width();
		if(winW <= 576){
			vm.labelPosition='top';
		}else{
			vm.labelPosition='right';
		}
	}
</script>
{include file="business"/}
{/block}